<template>
  <div class="r-c">
    <div class="r-t">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="账单类型" prop="type">
          <el-select v-model="queryParams.type" placeholder="选择账单类型" size="small" style="width: 150px">
            <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size='small' @click="handleQuery" :icon='Search'
          >搜索</el-button
          >
          <el-button @click="resetQuery" size='small' :icon='Refresh'>
            重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
        v-loading="loading"
        :data="pageData"
        :strip='true'
        :border='true'
    >
      <el-table-column
          key="type"
          label="账单类型"
          align="center"
          prop="type"
          width="200"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.type === 'payment'" type="success">支付</el-tag>
          <el-tag v-else-if="scope.row.type === 'refund'" type="danger">退款</el-tag>
          <el-tag v-else type="danger">充值</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          key="amount"
          label="账单金额"
          align="center"
          prop="amount"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.type === 'payment'" type="success">-￥{{scope.row.amount}}</el-tag>
          <el-tag v-else-if="scope.row.type === 'refund' || scope.row.type === 'recharge'" type="danger">+￥{{scope.row.amount}}</el-tag>
          <el-tag v-else type="danger">{{scope.row.amount}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="账单描述" align="center" prop="remark" key="remark"></el-table-column>
      <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          width="180"
      />
      <el-table-column
          label="更新时间"
          align="center"
          prop="updateTime"
          width="180"
      />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
              type="danger"
              size="small"
              @click="deleteHistoryBilling(scope.row.id)"
              :icon='Delete'
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-footer class='footer'>
      <el-pagination
          size="small"
          background
          v-model:current-page="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          :page-count='pagination.pageCount'
          layout='total, prev, pager, next'
          :total='pagination.total'
          class='mt-4'
          style='float: left'
          @change='getPage'
      />
    </el-footer>
  </div>
</template>
<script setup lang="ts">
import {ref, reactive, onMounted} from "vue";
import {Search, Refresh, Edit, View, Delete} from '@element-plus/icons-vue'
  import storage from '@/utils/storage.ts'
import {deleteBilling, rechargeBillingPage} from "@/api/payment.ts";
import {ElMessage, ElMessageBox} from "element-plus";
  const queryFormRef = ref()
  const pageData = ref([])

  const options = [{
    label: '支付',
    value: 'payment'
  },{
    label: '退款',
    value: 'refund'
  },{
    label: '充值',
    value: 'recharge'
  }]

  const pagination = ref({
    currentPage: 1,
    pageSize: 10,
    total: 1,
    pageNum: 1,
    pageCount: 1,
  });

  const loading = ref(false)

  const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
    type: undefined,
    memberId: undefined,
  });

  const user = ref()

  //查询
  const handleQuery = async () => {
    user.value = JSON.parse(storage.getItem('userInfo'))
    queryParams.memberId = user.value.id
    rechargeBillingPage(queryParams).then((resp)=>{
      pageData.value = resp.data.records;
      pagination.value.total = resp.data.total;
      pagination.value.pageCount = resp.data.pages;
    })
  }
  const getPage = (currentPage:number,pageSize :number) => {
    user.value = JSON.parse(storage.getItem('userInfo'))
    queryParams.memberId = user.value.id
    queryParams.pageNum = currentPage
    queryParams.pageSize = pageSize
    handleQuery()
  }
  //重置查询条件
  const resetQuery = () => {
    queryFormRef.value.resetFields();
    queryParams.pageNum = 1;
    handleQuery();
  }

  const deleteHistoryBilling = (id:number) => {
    ElMessageBox.confirm("确认删除?", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      deleteBilling({id:id}).then((resp) => {
        ElMessage.success("删除成功");
        handleQuery();
      });
    });
  }

  onMounted(()=>{
    user.value = JSON.parse(storage.getItem('userInfo'));
    handleQuery()
  })

</script>
<style scoped>
  .r-c{
    width: 95%;
    margin-top: 10px;
  }
</style>